<template>
    <div class="transportationClass">
      <el-button @click="addUser" size="small" style="margin: 6px 0 6px 1%;"> 新增出行人信息</el-button>

      <div v-for="(searchParams,index) in formLIst" :key="searchParams.tdywId">
        <el-card class="boxCard">
            <div slot="header" class="clearfix">
                <span>出行人 {{ index +1 }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="del(searchParams.tdywId)">删除</el-button>
            </div>
            <el-form
            :model="searchParams"
            size="small"
            :rules="rules"
            class="zulinFormClass"
            ref="userForms"
            label-width="140px"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="出行人" prop="cxr">
                        <el-input
                            style="width:200px;"
                            size="small"
                            maxlength="20"
                            v-model="searchParams.cxr"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="出行人证件类型"
                        prop="cxrzjlxdm"
                    >
                        <el-select
                                        size="small"
                                        v-model="searchParams.cxrzjlxdm"
                                        placeholder="请选择"

                                    >
                                        <el-option v-for="(val,key) in CARDTYPE" :label="val" :value="key" :key="key"></el-option>
                                    </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="有效身份证件">
                            <el-input
                                style="width:200px;"
                                size="small"
                                maxlength="20"
                                v-model="searchParams.sfzjhm"
                                placeholder="请输入"
                            ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                        <el-form-item
                        label="出行日期"
                        prop="chuxrq"
                    >
                        <el-date-picker
                        style="width:200px;"
                            v-model="searchParams.chuxrq"
                            type="date"
                            align="right"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="旅客出发地" prop="cfd">
                        <el-input
                                style="width:200px;"
                                size="small"
                                maxlength="40"
                                v-model="searchParams.cfd"
                                placeholder="请输入"
                            ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="旅客到达地" prop="ddd">
                        <el-input
                                style="width:200px;"
                                size="small"
                                maxlength="40"
                                v-model="searchParams.ddd"
                                placeholder="请输入"
                            ></el-input>
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="交通工具类型" prop="jtgjlxdm">
                                <el-select
                                    size="small"
                                    v-model="searchParams.jtgjlxdm"
                                    placeholder="请选择"
                                    style="width:200px;"
                                    @change="changeJTGJLX(searchParams)"
                                >
                                    <el-option label="飞机" value="1"></el-option>
                                    <el-option label="火车" value="2"></el-option>
                                    <el-option label="长途汽车" value="3"></el-option>
                                    <el-option label="公共交通" value="4"></el-option>
                                    <el-option label="出租车" value="5"></el-option>
                                    <el-option label="汽车" value="6"></el-option>
                                    <el-option label="船舶" value="7"></el-option>
                                    <el-option label="其他" value="9"></el-option>
                                </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="等级" prop="zwdj" :rules="getValidationRules(index)" v-show="searchParams.zwdjList&&searchParams.zwdjList.length">
                                <el-select
                                    size="small"
                                    v-model="searchParams.zwdj"
                                    placeholder="请选择"
                                    style="width:200px;"
                                >
                                    <el-option :label="item" :value="item" v-for="item in searchParams.zwdjList" :key="item"></el-option>
                                </el-select>
                    </el-form-item>
                    <el-form-item label="等级"  v-show="!(searchParams.zwdjList&&searchParams.zwdjList.length)">
                                <el-select
                                    size="small"
                                    v-model="searchParams.zwdj"
                                    placeholder="请选择"
                                    style="width:200px;"
                                    :disabled="searchParams.zwdjList && searchParams.zwdjList.length == 0"
                                >
                                    <el-option :label="item" :value="item" v-for="item in searchParams.zwdjList" :key="item"></el-option>
                                </el-select>
                    </el-form-item>

                </el-col>
            </el-row>
        </el-form>
        </el-card>

      </div>

    </div>
  </template>
  
  <script>
  import { CARDTYPE } from '@/components/common/constant.js'
  export default {
    props: ['vmsManualTdywDtoList'],
    data() {
      return {
        formLIst: [

        ],
        addTime:false,

        rules:{
                    chuxrq: [
                     {  required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    cfd: [
                      {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    ddd: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    jtgjlxdm: [
                        {  required: true, message: '请选择', trigger: 'change' }
                    ],
                    zwdj: [
                       {  required: true, message: '请选择', trigger: 'change' }
                    ],
                },
        CARDTYPE
      };
    },
    methods: {
        changeJTGJLX(searchParams){
            let {jtgjlxdm} = searchParams
            let resArr = [];
            if(jtgjlxdm == 2 ){ // 火车
                resArr = [
                    '一等座',
                    '二等座',
                    '软席（软座、软卧）',
                    '硬席（硬座、硬卧）',
                ]
            }else if(jtgjlxdm == 1 ){ // fj
                resArr = [ 
                    '公务舱',
                    '头等舱',
                    '经济舱',
                ]
            }else if(jtgjlxdm == 7 ){
                resArr = [ 
                    '一等舱',
                    '二等舱',
                    '三等舱',
                ]
            }
            searchParams.zwdjList = resArr
            if(resArr && resArr.length  == 0)searchParams.zwdj = '';
            if(resArr && !resArr.includes(searchParams.zwdj)){
                searchParams.zwdj = '';
            }
        },
        del(tdywId){
                this.formLIst = this.formLIst.filter(item => item.tdywId !== tdywId);
        },
        async submitValidate() {
            let res = true;
            for (let index = 0; index < this.formLIst.length; index++) {
                let singleRes = await this.validateForm(index);

                if (singleRes) {
                    res = false;
                }
            }
            return res;
        },
        async validateForm(index) {
            let singleRes = false;
            let valid = await this.$refs.userForms[index].validate().catch((err) => {
                return false;
            });
            if(Array.isArray(this.$refs.userForms[index].zwdjList) && this.$refs.userForms[index].zwdjList.length ){
                valid = await  this.$refs.userForms[index].validateField('zwdj');
            }
            if (!valid) {
                singleRes = true;
            }
            return singleRes;
        },
      addUser() {
        this.addTime = true;

        let newForm ={
            tdywId:  new Date().getTime()  +  Math.floor(Math.random()* 99999999),
            cxr:'',
            cxrzjlxdm:'',
            sfzjhm:'',
            chuxrq:'',
            cfd:'',
            ddd:'',
            jtgjlxdm:'',
            zwdj:'',
            zwdjList:[],
        }
        this.formLIst.push(newForm);
      },
      getFormValue() {
        this.formLIst = this.formLIst.map((item,index)=>{
            return {
                ...item,
                cxrxh: index+1
            }
        })
        return this.formLIst;
      },
      formateList() {
        this.formLIst = this.formLIst.map((user, index) => {
                        let resArr = [];
                        if(user.jtgjlxdm == 2 ){ // 火车
                            resArr = [
                                '一等座',
                                '二等座',
                                '软席（软座、软卧）',
                                '硬席（硬座、硬卧）',
                            ]
                        }else if(user.jtgjlxdm == 1 ){ // fj
                            resArr = [ 
                                '公务舱',
                                '头等舱',
                                '经济舱',
                            ]
                        }else if(user.jtgjlxdm == 7 ){
                            resArr = [ 
                                '一等舱',
                                '二等舱',
                                '三等舱',
                            ]
                        }

                        console.log(resArr);
                        user['zwdjList'] = resArr
                        if(resArr && resArr.length  == 0)user.zwdj = '';
                        if(resArr && !resArr.includes(user.zwdj)){
                            user.zwdj = '';
                        }
                        return user;
                });
      },
    },
    created(){
        this.formLIst = this.vmsManualTdywDtoList || [];
        this.formateList()
    },
    computed: {
        getValidationRules() {
            return (index) => {
                try {
                    console.log(index);
                    console.log(this.formLIst[index].zwdjList);
                } catch (error) {
                    console.log(error);
                }
                const rules = [];
                if (Array.isArray(this.formLIst[index].zwdjList) && this.formLIst[index].zwdjList.length > 0) {
                    rules.push({ required: true, message: '必选项', trigger: 'change' });
                }

                return rules;
            }
        }
        },
  };
  </script>


<style lang="scss" scoped>
.transportationClass{
    border: 1px solid #bb8c91;
    white-space: normal;
    // ::v-deep{
    //     width: 100%;
    // }
    .boxCard{
        width: 98%;
        margin: 1%;
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }
    }
}
</style>